import React, { useState, useEffect, useMemo } from 'react';
import { Row, Col, Select, InputNumber } from 'antd';
import { compare } from '../../../../utils/compare';

const HIT_HANDLES_TEXT = {
  pass: '通过',
  review: '人工审核',
  refuse: '拒绝'
};

const OPERATORS = [
  { code: 'lt', symbol: '<' },
  { code: 'lte', symbol: '≤' }
];

/**
 * @component HitHandleByThreshold
 * @prop {Boolean} isScore 默认false，决定展示方式，如果等于'score'则为评分卡
 * @prop {Number} first_threshold 默认undefined
 * @prop {Number} second_threshold 默认undefined
 * @prop {Array} threshold_operators 默认undefined,要求['lt','lte']
 * @prop {Function} onChange 默认undefined,值改变的回调方法 value 
 * {
      first_threshold: '',
      second_threshold: '',
      threshold_operators: [firstOperator, secondOperator],
      hit_handles: ['pass', 'review', 'reject']
    }
 */

export default function HitHandleByThreshold(props) {
  const [firstValue, setFirstValue] = useState('');
  const [secondValue, setSecondValue] = useState('');
  const [firstOperator, setFirstOperator] = useState('lte');
  const [secondOperator, setSecondOperator] = useState('lt');
  const [hitHandles, setHitHandles] = useState(['pass', 'refuse', 'reject']);
  useEffect(() => {
    // 如果是评分卡，则有区别
    const hits = props.isScore ? ['reject', 'refuse', 'pass'] : ['pass', 'refuse', 'reject'];
    props.isScore && setFirstOperator('lte');
    props.isScore && setSecondOperator('lt');
    hitHandleChange(hits);
  }, [props.isScore]);

  useMemo(() => {
    setFirstValue(props.value.first_threshold); // 第一个值
    setSecondValue(props.value.second_threshold); // 第二个值
    if (
      props.value.threshold_operators &&
      props.value.threshold_operators instanceof Array &&
      props.value.threshold_operators.length === 2
    ) {
      setFirstOperator(props.value.threshold_operators[0]);
      setSecondOperator(props.value.threshold_operators[1]);
    }
  }, [props.value.first_threshold, props.value.second_threshold, props.value.threshold_operators]); // 操作符

  // hitHandleChange
  function hitHandleChange(value) {
    setHitHandles(value);
    const f_value = {
      first_threshold: firstValue,
      second_threshold: secondValue,
      threshold_operators: [firstOperator, secondOperator],
      hit_handles: value
    };
    props.onChange && props.onChange(f_value);
  }

  // 第一个值变化回调
  function handleChangeFirstValue(value) {
    setFirstValue(value);
    const f_value = {
      first_threshold: value,
      second_threshold: secondValue,
      threshold_operators: [firstOperator, secondOperator],
      hit_handles: hitHandles
    };
    props.onChange && props.onChange(f_value);
  }

  // 第二个值变化回调
  function handleChangeSecondValue(value) {
    setSecondValue(value);
    const f_value = {
      first_threshold: firstValue,
      second_threshold: value,
      threshold_operators: [firstOperator, secondOperator],
      hit_handles: hitHandles
    };
    props.onChange && props.onChange(f_value);
  }

  // threshold_operators变化回调
  function handleChangeFirstOperatorValue(value) {
    setFirstOperator(value);
    const f_value = {
      first_threshold: firstValue,
      second_threshold: secondValue,
      threshold_operators: [value, secondOperator],
      hit_handles: hitHandles
    };
    props.onChange && props.onChange(f_value);
  }

  // threshold_operators变化回调
  function handleChangeSecondOperatorValue(value) {
    setSecondOperator(value);
    const f_value = {
      first_threshold: firstValue,
      second_threshold: secondValue,
      threshold_operators: [firstOperator, value],
      hit_handles: hitHandles
    };
    props.onChange && props.onChange(f_value);
  }
  return (
    <div>
      {props.isScore ? (
        <Row type='flex' align='middle' justify='start' gutter={20}>
          <Col>0</Col>
          <Col>{OPERATORS[0].symbol}</Col>
          <Col className='label-text'>{HIT_HANDLES_TEXT[hitHandles[0]]}</Col>
          <Col>{OPERATORS[1].symbol}</Col>
          <Col>
            <InputNumber
              min={0}
              step={1}
              value={firstValue}
              onChange={value => handleChangeFirstValue(value)}
              style={compare(props, 'first_threshold')}
              disabled={props.disabled}
            />
          </Col>
          <Col>{OPERATORS[0].symbol}</Col>
          <Col className='label-text'>{HIT_HANDLES_TEXT[hitHandles[1]]}</Col>
          <Col>{OPERATORS[1].symbol}</Col>
          <Col>
            <InputNumber
              min={0}
              step={1}
              value={secondValue}
              onChange={value => handleChangeSecondValue(value)}
              style={compare(props, 'second_threshold')}
              disabled={props.disabled}
            />
          </Col>
          <Col>{OPERATORS[0].symbol}</Col>
          <Col className='label-text'>{HIT_HANDLES_TEXT[hitHandles[2]]}</Col>
        </Row>
      ) : (
        <Row type='flex' align='middle' justify='start' gutter={20}>
          <Col className='label-text'>{HIT_HANDLES_TEXT[hitHandles[0]]}</Col>
          <Col>
            <Select
              value={firstOperator}
              onChange={value => {
                handleChangeFirstOperatorValue(value);
              }}
              style={compare(props, 'threshold_operators', 0)}
              disabled={props.disabled}
            >
              {OPERATORS.map(item => {
                return (
                  <Select.Option value={item.code} key={item.code}>
                    {item.symbol}
                  </Select.Option>
                );
              })}
            </Select>
          </Col>
          <Col>
            <InputNumber
              min={0}
              step={1}
              value={firstValue}
              onChange={value => handleChangeFirstValue(value)}
              style={compare(props, 'first_threshold')}
              disabled={props.disabled}
            />
          </Col>
          <Col>
            {firstOperator === 'lt' ? '≤' : '<'}
            <span className='label-text'>{HIT_HANDLES_TEXT[hitHandles[1]]}</span>
          </Col>
          <Col>
            <Select
              value={secondOperator}
              onChange={value => {
                handleChangeSecondOperatorValue(value);
              }}
              style={compare(props, 'threshold_operators', 1)}
              disabled={props.disabled}
            >
              {OPERATORS.map(item => {
                return (
                  <Select.Option value={item.code} key={item.code}>
                    {item.symbol}
                  </Select.Option>
                );
              })}
            </Select>
          </Col>
          <Col>
            <InputNumber
              min={0}
              step={1}
              value={secondValue}
              onChange={value => handleChangeSecondValue(value)}
              style={compare(props, 'second_threshold')}
              disabled={props.disabled}
            />
          </Col>
          <Col>
            {secondOperator === 'lt' ? '≤' : '<'}
            <span className='label-text'>{HIT_HANDLES_TEXT[hitHandles[2]]}</span>
          </Col>
        </Row>
      )}
    </div>
  );
}
